<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="/css/lay.css/layui.css">
  <link rel="stylesheet" href="/css/font.css">
  <link rel="stylesheet" href="/css/xadmin.css">
  <link rel="stylesheet" href="/css/advpos/advpos.css">
  <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div class="layui-fluid">
    <!-- //  头部切换按钮区域 -->
    <div class="layui-row layui-col-space15" id="advops-top-btns">
      <button type="button" class="layui-btn layui-btn-danger  layui-btn-lg" id="advpos-list-btn">广告位列表</button>
      <button type="button" class="layui-btn layui-btn-primary  layui-btn-lg" id="advpos-add-btn">添加广告位</button>
    </div>

    <!-- 中间的数据列表区域 -->
    <div class="body" id="advpos-laybelList">
      <table class="layui-table">
        <colgroup>
          <col width="100">
          <col width="100">
          <col>
          <col>
          <col>
          <col>
          <col width="200">
        </colgroup>
        <thead>
          <tr>
            <th>序号</th>
            <th>ID编号</th>
            <th>广告位名称</th>
            <th>广告位描述</th>
            <th>广告位尺寸</th>
            <th>广告位数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
      <!-- 分页区域 -->
      <div id="pageBox"></div>
    </div>


  </div>




  <!--添加广告位的 卡片区域 -->
  <div id="advpos-addLaybel" style="display: none;">
    <div class="layui-card">

      <div class="layui-card-body">
        <form class="layui-form" action="" id="advpos-add-form">
          <div class="layui-form-item" id="layui-card-input">
            <label class="layui-form-label">广告位名称</label>
            <div class="layui-input-block">
              <input type="text" name="title" required lay-verify="required" placeholder="请输入名称" autocomplete="off"
                class="layui-input" id="advpos-name">
            </div>
          </div>
          <div class="layui-form-item" id="layui-card-input">
            <label class="layui-form-label">广告位描述</label>
            <div class="layui-input-block">
              <input type="text" name="title" required lay-verify="required" placeholder="请输入描述" autocomplete="off"
                class="layui-input" id="advpos-discript">
            </div>
          </div>
          <div class="layui-form-item" id="layui-card-input">
            <label class="layui-form-label">广告位尺寸</label>
            <div class="layui-input-block">
              <input type="text" name="title" required lay-verify="required|advposSize"
                placeholder="宽度，高度。如：200，300 注意英文你逗号间隔" autocomplete="off" class="layui-input" id="advpos-size">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit>立即创建</button>
              <button type="reset" class="layui-btn layui-btn-primary">取消</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>





<!-- 表格数据的摸板 -->
<script type="text/html" id="tpl-table">
  {{each data}}
  <tr>
    <td>{{$index+1}}</td>
    <td>{{$value.id}}</td>
    <td>{{$value.advposname}}</td>
    <td>{{$value.advposdesc}}</td>
    <td>{{$value.advpossize}}</td>
    <td>{{$value.advposnum}}</td>
    <td>
     
      <!-- 修改广告信息按钮 -->
      <button type="button" class="layui-btn layui-bg-green" data-id="{{$value.id}}" data-advposname="{{$value.advposname}}" data-advposdesc="{{$value.advposdesc}}" data-advpossize="{{$value.advpossize}}"  data-advposnum="{{$value.advposnum}}" id="made-btn">
        <i class="layui-icon layui-icon-edit"></i>
      </button>
      
      <!-- 删除广告按钮 -->
      <button type="button" class="layui-btn layui-bg-red" data-id="{{$value.id}}" data-advposname="{{$value.advposname}}" data-advposdesc="{{$value.advposdesc}}" data-advpossize="{{$value.advpossize}}"  data-advposnum="{{$value.advposnum}}" id="del-btn">
        <i class="layui-icon layui-icon-delete"></i>
      </button>
    </td>
  </tr>
  {{/each}}
</script>








<!-- 修改标签标签 -->
<script type="text/html" id="devpos-edit-text">
  <form class="layui-form" action="" id="form-add">

  
    <div class="layui-form-item">
      <label class="layui-form-label">广告位名称</label>
      <div class="layui-input-block">
        <input type="text" name="advposname" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input" id="edit-advpos-name">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">广告位描述</label>
      <div class="layui-input-block">
        <input type="text" name="advposdesc" required  lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input" id="edit-advpos-descript">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">广告位尺寸</label>
      <div class="layui-input-block">
        <input type="text" name="advpossize" required  lay-verify="required|advposSize" placeholder="宽度，高度。如：200，300 注意英文你逗号间隔" autocomplete="off" class="layui-input" id="edit-advpos-size">
      </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
      <button type="reset" class="layui-btn layui-btn-primary" id="layer-reset">取消</button>
    </div>
  </div>
    </form>
</script>




<script>
</script>
<script src="/lib/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/template-web.js"></script>
<script src="/js/advpos/advpos.js"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>

</html>